<template>
	<div class="login_app">
		<div class="image">
			<img src="https://s1.ax1x.com/2022/05/14/O6Bj4e.png" alt="" />
		</div>
		<el-form ref="form" :model="form" label-width="70px" v-if="!loginTi">
			<el-form-item label="昵称">
				<el-input v-model="form.userName" placeholder="请输入昵称"></el-input>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
			</el-form-item>
			<el-form-item label="登录密码">
				<el-input show-password v-model="form.password" placeholder="请输入登录密码"></el-input>
			</el-form-item>
			<el-form-item label="确认密码">
				<el-input show-password v-model="form.newPassword" placeholder="请输入确认密码"></el-input>
			</el-form-item>
			<el-form-item label="验证码">
				<el-input v-model="form.verificationCode" placeholder="请输入验证码"></el-input>
				<el-button @click="handleClick" class="code_btn">{{ name }}</el-button>
			</el-form-item>
			<el-form-item label="邀请码">
				<el-input v-model="form.sharer" placeholder="请输入邀请码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button class="submit_btn" type="primary" @click="onSubmit">注册</el-button>
			</el-form-item>
		</el-form>
		<div class="login_ti" v-if="loginTi">
			下载中...
		</div>
	</div>
</template>

<script>
	import * as login from "@/api/login";
	export default {
		data() {
			return {
				loginTi: false,
				form: {},
				name: "点击发送验证码",
				visible: false,
			};
		},
		methods: {
			verification() {
				return new Promise((resolve, reject) => {
					let reg =
						/^1(3\d{2}|4[14-9]\d|5([0-35689]\d|7[1-79])|66\d|7[2-35-8]\d|8\d{2}|9[13589]\d)\d{7}$/;

					let password = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/
					if (!this.form.userName) {
						this.$message({
							message: "请输入昵称",
							type: "warning",
						});
					} else if (!this.form.phone) {
						this.$message({
							message: "请输入手机号码",
							type: "warning",
						});
					} else if (!this.form.password) {
						this.$message({
							message: "请输入登录密码",
							type: "warning",
						});
					} else if (!this.form.newPassword) {
						this.$message({
							message: "请输入确认密码",
							type: "warning",
						});
					} else if (!this.form.verificationCode) {
						this.$message({
							message: "请输入验证码",
							type: "warning",
						});
					} else if (this.form.password !== this.form.newPassword) {
						this.$message({
							message: "两次输入密码不一致",
							type: "warning",
						});
					} else if (!reg.test(this.form.phone)) {
						this.$message({
							message: "请输入有效的手机号码",
							type: "warning",
						});
					} else {
						resolve();
					}
				});
			},
			handleClick() {
				let reg =
					/^1(3\d{2}|4[14-9]\d|5([0-35689]\d|7[1-79])|66\d|7[2-35-8]\d|8\d{2}|9[13589]\d)\d{7}$/;
				if (!this.form.phone) {
					this.$message({
						message: "请输入手机号码",
						type: "warning",
					});
					return;
				} else if (!reg.test(this.form.phone)) {
					this.$message({
						message: "请输入有效的手机号码",
						type: "warning",
					});
					return;
				}
				if (this.visible) {} else {
					login
						.memberLoginSendSms({
							templateId: "SMS_241100166",
							phoneNumberSet: this.form.phone,
						})
						.then((res) => {
							if (res.code === 200) {
								this.$message({
									message: "发送成功",
									type: "success",
								});
								this.visible = true;
								let sum = 60;
								let set = setInterval(() => {
									if (sum <= 0) {
										clearInterval(set);
										this.name = "点击发送验证码";
										this.visible = false;
									} else {
										sum--;
										this.name = sum + "S后可重新发送";
									}
								}, 1000);
							} else {
								this.$message({
									message: res.message,
									type: "warning",
								});
							}
						});
				}
			},
			onSubmit() {
				this.verification().then((res) => {
					login
						.appRegister({
							memberName: this.form.phone,
							verificationCode: this.form.verificationCode,
							sharer: this.form.sharer,
							userName: this.form.userName,
							password: this.form.password,
						})
						.then((res) => {
							if (res.code === 200) {
								this.$message({
									message: "发送成功，即将跳转下载链接",
									type: "success",
								});

								setTimeout(() => {
									this.loginTi = true
									let link = document.createElement('a')
									link.style.display = "none"
									link.href = "http://101.33.229.251:888/sftp/files/xhnc.apk";
									link.setAttribute("download", "新禾农场")
									document.body.appendChild(link)
									link.click()
								}, 1000)
							} else {
								this.$message({
									message: res.message,
									type: "warning",
								});
							}
						});
				});
			},
		},
	};
</script>

<style scoped>
	.login_app {
		padding: 40px 10px;
		font-size: 12px;
	}

	.image {
		text-align: center;
	}

	.login_app img {
		width: 100px;
		height: 100px;
	}

	.code_btn {
		width: 120px;
		margin-left: 10px;
		padding: 12px 0px;
	}

	.submit_btn {
		width: 200px;
	}

	.login_ti {
		text-align: center;
		font-size: 24px;
	}
</style>
